import React, { useState } from "react";
import DetailCurrentWeather from '../components/detail-current-weather';
import ProcastWeather from '../components/procast-weather';
import HourWeather from '../components/hour-weather';
import HourWeatherChart from '../components/hour-weather-chart';
import {createBrowserHistory} from 'history'
import '../style/detail.scss'




export default function Detail(props) {
  const  {current, daily, hourly, hourEcharts, isLoading,isError, show, onClose } = props


  return <div  className='detail' style={{display:show ? 'block' : 'none'}}>
    <div className='detail-box'>
     <div className="detail-current">
      <DetailCurrentWeather onBack={onClose} weather={current} isError={isError} isLoading={isLoading} />
     </div>
     <div className='detail-hours-chart'>
        { show && <HourWeatherChart weather={hourEcharts} isError={isError} isLoading={isLoading}/>}
     </div>
     <div className="detail-hours">
       <HourWeather weather={hourly} isError={isError} isLoading={isLoading} />
     </div>
     <div className="detail-procast">
      <ProcastWeather weather={daily} isError={isError} isLoading={isLoading} />
     </div>
    </div>
  </div>;
}